<template>
    <div class="address">
        <van-popup v-model="show" position="bottom">
            <picker ref="picker" :title="title" :columns="columns" :default-index="defaultIndex" show-toolbar @cancel="cancel" @confirm="confirm" />
        </van-popup>
    </div>
</template>

<script>

import { Picker } from 'vant';
import pickerData from "@/utils/pickerData";


export default {

    props: ["title", "value", "columns"],

    data() {
        return {
            show: false,
        }
    },

    components: { Picker },

    methods: {
        showPicker() {
            this.show = true;
        },

        cancel() {
            this.show = false;
        },

        confirm(e) {
            this.show = false;
            let _showText, _code = "";
            if (Array.isArray(e)) {
                _showText = e.join('-');
                let _indexs = this.getIndexes();
                if (_indexs.length == 2) {
                    _code = [this.columns[_indexs[0]].code, this.columns[_indexs[0]].children[_indexs[1]].code];
                } else if (_indexs.length == 3) {
                    _code = [this.columns[_indexs[0]].code, this.columns[_indexs[0]].children[_indexs[1]].code, this.columns[_indexs[0]].children[_indexs[1]].children[_indexs[2]].code];
                } else {
                    _code = "";
                }
            } else {
                _showText = e.text;
                _code = e.code;
            }
            console.log(_code, _showText)
            this.$emit("commit", {
                code: _code,
                showText: _showText
            });
        },

        getIndexes() {
            return this.$refs.picker.getIndexes();
        },

    },

    computed: {

        defaultIndex() {
            if (!this.value) {
                return 0;
            }
            for (let index = 0; index < this.columns.length; index++) {
                const cell = this.columns[index];
                if (cell.text == this.value) {
                    return index
                }
            }
            return 0;
        }
    }
};

</script>

<style lang="scss" scoped></style>